<template>
  <div>
    <transition name="fade">
      <div v-if="isPractice" key="tab1">
        <div @click="tabClick" class="tab">
          <img src="../../../assets/img/plamat-ali.png"/>
          <button>{{tabMsg}}</button>
        </div>
        <plat-practice ></plat-practice>
      </div>
     <div v-else key="tab2">
       <div @click="tabClick" class="tab">
         <img src="../../../assets/img/plamat-ali.png"/>
         <button>{{tabMsg}}</button>
       </div>
       <plat-video></plat-video>
     </div>

    </transition>

  </div>
</template>

<script>
import platPractice from "../Practice/index"
import platVideo from  "../Video/index"
export default {
  name: "index",
  components:{
    platPractice,platVideo
  },
  data(){
    return{
      isPractice:true,
      tabMsg:'切换为视频'
    }
  },
  methods:{
    tabClick(){
      this.isPractice=!this.isPractice
      if(this.isPractice){
        this.tabMsg='切换为视频'
      }else {
        this.tabMsg='切换为练习题'
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.fade-enter-active
  transition all .2s ease
  transition-delay .2s

.fade-leave-active
  transition all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0)

.fade-enter
  transform translateX(-80px)
  opacity 0

.fade-leave-to
  transform translateX(80px)
  opacity: 0;

.tab
  width 100%
  height 65px
  height chang
  display flex
  box-sizing border-box
  padding 0 12px
  justify-content space-between
  align-items center
  cursor pointer
  margin-bottom 10px
  transition transform  .5s ease-in-out,color .2s
  & img
    height 100%


button
  outline none
  border none
  box-shadow 0 0 2px gray
  height 60%
  font-weight bold
  color rgb(109,109,109)
  cursor pointer
  width 100%
  border-radius 20px
  background-color rgba(0,0,0,0)
  &:hover
    background-color rgb(220,220,220)

//.ali-leave-active
//  transition all 1s ease-in
//
//.ali-leave-to
//  transform rotateY(180deg)

</style>